import React, { useState } from 'react'
import styles from './index.module.css'
import {
  UserOutline,
  RightOutline,
  DeleteOutline,
  FillinOutline
} from 'antd-mobile-icons'
import { NavBar, Popup, Steps, List, Modal, Form, Input, Button, Radio, Space } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'

function Index() {
  const { ticksons } = useSelector((state) => state.TickSlice)
  const [visible1, setVisible1] = useState(false)
  const [visible, setVisible] = useState(false)
  const { state } = useLocation()
  const { Step } = Steps
  const { form } = Form.useForm()
  console.log(state);
  let navigate = useNavigate()
  const onFinish = () => {
    setVisible(false)
  }
  return (
    <div className={styles.body_wroe}>
      <div className={styles.top_wroe}>
        <NavBar onBack={() => navigate(-1)}>选择乘车人</NavBar>
      </div>
      <div className={styles.left_wroe}>
        <span>{state.start}</span>
        <span>{state.startTime}</span>
        <span>{state.end}</span>
        <span>一等座<b>有票</b></span>
        <span>二等座<b>有票</b></span>
        <span>三等座<b>有票</b></span>
        <div className={styles.box_wroe}>
          <span className={styles.btn_wroe} fill='outline' onClick={() => setVisible1(true)}>
            停靠站
          </span>
        </div>
      </div>
      <div className={styles.kong_wroe}>

      </div>
      <div className={styles.tick_wroe}>
        <div>
          <UserOutline />
          <span className={styles.tick_wro} onClick={() => setVisible(true)}>添加/修改乘车人</span>
        </div>
        <div>
          <RightOutline />
        </div>
      </div>
      <div className={styles.btm_wroe}>
        {
          ticksons.map((item, ind) => (
            <List key={ind} >
              <List.Item arrowIcon={false} extra={<div className={styles.icon_wroe}>
                <span><DeleteOutline /></span>
                <span><FillinOutline /></span>
              </div>} description={item.code} clickable>
                姓名:{item.name}
                身份:{item.log}
              </List.Item>
            </List>

          ))
        }
      </div>
      <div className={styles.bottom_wroe}>
        <div className={styles.span_wroe}>立即预订<RightOutline /></div>
        <div className={styles.span1_wroe}>
          <span className={styles.btm_span_wroe}>立即预定</span>
          <br />
          优惠出票，酒店立减劵+10元 X 1
        </div>
      </div>
      <div>
        <Popup
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false)
          }}
          onClose={() => {
            setVisible1(false)
          }}
          bodyStyle={{ height: '50vh' }}
        >
          <Steps direction='vertical'>
            <Step
              title='北京'
              status='finish'
              description='完成时间：2020-12-01 12:30'
            />
            <Step
              title='石家庄'
              status='finish'
              description='完成时间：2020-12-01 12:30'
            />
            <Step
              title='信阳'
              status='finish'
              description='完成时间：2020-12-01 12:30'
            />
            <Step
              title='海南'
              status='finish'
              description='完成时间：2020-12-01 12:30'
            />
            <Step
              title='四川'
              status='finish'
              description='完成时间：2020-12-01 12:30'
            />
            <Step
              title='重庆'
              status='finish'
              description='完成时间：2020-12-01 12:30'
            />
            <Step title='广州' status='finish' />
          </Steps>
        </Popup>
        <Modal
          visible={visible}
          content={
            <Form
              form={form}
              onFinish={onFinish}
              layout='horizontal'
              footer={
                <Button block type='submit' color='primary' size='large'>
                  提交
                </Button>
              }
            >
              <Form.Item
                name='name'
                label='姓名'
                rules={[{ required: true, message: '姓名不能为空' }]}
              >
                <Input onChange={console.log} placeholder='请输入姓名' />
              </Form.Item>
              <Form.Item
                name='code'
                label='身份证号'
                rules={[{ required: true, message: '身份证号不能为空' }]}
              >
                <Input onChange={console.log} placeholder='请输入身份证号' />
              </Form.Item>
              <Form.Item
                name='log'
                label='身份'
              >
                <Radio.Group defaultValue='1'>
                  <Space direction='vertical' className={styles.logs_wroe}>
                    <Radio value='1'>学生</Radio>
                    <Radio value='2'>儿童</Radio>
                    <Radio value='3'>老人</Radio>
                  </Space>
                </Radio.Group>
              </Form.Item>
            </Form>
          }
        />
      </div>
    </div>
  )
}

export default Index
